<template>
  <div class="content-area">
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <div class="welcome-title">早上好，李护士！</div>
      <div class="welcome-subtitle">今天您有23个护理任务，其中5个待处理</div>
    </div>

    <!-- 紧急任务卡片 -->
    <div class="urgent-tasks-card">
      <div class="urgent-header">
        <h3>紧急护理任务</h3>
        <el-button type="danger">
          <el-icon><Warning /></el-icon>
          <span>查看全部</span>
        </el-button>
      </div>
      <div class="urgent-list">
        <div class="urgent-item" v-for="task in urgentTasks" :key="task.id">
          <div class="task-info">
            <div class="task-name">{{ task.name }}</div>
            <div class="task-details">
              {{ task.patient }} · {{ task.location }}
            </div>
          </div>
          <div class="task-time">{{ task.time }}</div>
        </div>
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">今日护理任务</div>
          <div class="stat-icon nursing-icon">
            <el-icon><FirstAidKit /></el-icon>
          </div>
        </div>
        <div class="stat-value">23</div>
        <div class="stat-desc">较昨日增加5个</div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">已完成</div>
          <div class="stat-icon">
            <el-icon><Checked /></el-icon>
          </div>
        </div>
        <div class="stat-value">12</div>
        <div class="stat-desc">已完成护理</div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">待处理</div>
          <div class="stat-icon">
            <el-icon><Clock /></el-icon>
          </div>
        </div>
        <div class="stat-value">5</div>
        <div class="stat-desc">等待处理</div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">输液任务</div>
          <div class="stat-icon">
            <el-icon><Watermelon /></el-icon>
          </div>
        </div>
        <div class="stat-value">8</div>
        <div class="stat-desc">今日输液患者</div>
      </div>
    </div>

    <!-- 今日任务列表 -->
    <div class="task-list">
      <div class="section-title">
        <span>今日护理任务</span>
        <span class="view-all">查看全部</span>
      </div>

      <div class="task-item" v-for="task in todayTasks" :key="task.id">
        <div class="task-icon">
          <el-icon>
            <component :is="task.icon" />
          </el-icon>
        </div>
        <div class="task-info">
          <div class="task-name">{{ task.name }}</div>
          <div class="task-details">
            {{ task.patient }} · {{ task.location }}
          </div>
        </div>
        <div class="task-time">{{ task.time }}</div>
        <div :class="['task-status', `status-${task.status}`]">
          {{ getStatusText(task.status) }}
        </div>
      </div>
    </div>

    <!-- 患者状态卡片 -->
    <div class="patient-status-cards">
      <div class="section-title">
        <span>负责患者状态</span>
        <span class="view-all">查看全部</span>
      </div>

      <div class="status-cards-grid">
        <div class="status-card" v-for="patient in patients" :key="patient.id">
          <div class="patient-header">
            <div class="patient-name">{{ patient.name }}</div>
            <div
              :class="['patient-condition', `condition-${patient.condition}`]"
            >
              {{ patient.conditionText }}
            </div>
          </div>
          <div class="patient-info">
            <div class="info-item">
              <span class="label">床号:</span>
              <span class="value">{{ patient.bed }}</span>
            </div>
            <div class="info-item">
              <span class="label">护理级别:</span>
              <span class="value">{{ patient.careLevel }}</span>
            </div>
            <div class="info-item">
              <span class="label">上次测量:</span>
              <span class="value">{{ patient.lastCheck }}</span>
            </div>
          </div>
          <div class="patient-actions">
            <el-button size="small">记录体征</el-button>
            <el-button size="small" type="primary">护理记录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const sidebarOpen = ref(false);

// 模拟紧急任务数据
const urgentTasks = ref([
  {
    id: 1,
    name: "紧急输液",
    patient: "张先生",
    location: "302病房",
    time: "10分钟前",
  },
  {
    id: 2,
    name: "血压异常",
    patient: "王女士",
    location: "405病房",
    time: "15分钟前",
  },
  {
    id: 3,
    name: "伤口处理",
    patient: "李先生",
    location: "208病房",
    time: "25分钟前",
  },
]);

// 模拟今日任务数据
const todayTasks = ref([
  {
    id: 1,
    name: "常规输液",
    patient: "张先生",
    location: "302病房",
    time: "09:30",
    status: "completed",
    icon: "Watermelon",
  },
  {
    id: 2,
    name: "血压测量",
    patient: "王女士",
    location: "405病房",
    time: "10:15",
    status: "pending",
    icon: "Monitor",
  },
  {
    id: 3,
    name: "伤口换药",
    patient: "李先生",
    location: "208病房",
    time: "11:00",
    status: "pending",
    icon: "FirstAidKit",
  },
  {
    id: 4,
    name: "体温监测",
    patient: "赵先生",
    location: "106病房",
    time: "14:30",
    status: "waiting",
    icon: "Sunny",
  },
]);

// 模拟患者数据
const patients = ref([
  {
    id: 1,
    name: "张先生",
    bed: "302-1",
    careLevel: "一级护理",
    lastCheck: "08:30",
    condition: "stable",
    conditionText: "状态稳定",
  },
  {
    id: 2,
    name: "王女士",
    bed: "405-2",
    careLevel: "特级护理",
    lastCheck: "09:15",
    condition: "attention",
    conditionText: "需关注",
  },
  {
    id: 3,
    name: "李先生",
    bed: "208-3",
    careLevel: "二级护理",
    lastCheck: "10:00",
    condition: "stable",
    conditionText: "状态稳定",
  },
]);

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    waiting: "待处理",
    pending: "进行中",
    completed: "已完成",
    urgent: "紧急",
  };
  return statusMap[status] || status;
};

const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value;
};
</script>

<style lang="scss" scoped>

.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.welcome-card {
  background: linear-gradient(135deg, #1a75bc 0%, #0c4d8c 100%);
  border-radius: 12px;
  padding: 24px;
  color: white;
  margin-bottom: 24px;
}

.welcome-title {
  font-size: 24px;
  margin-bottom: 8px;
}

.welcome-subtitle {
  opacity: 0.9;
  margin-bottom: 20px;
}

.urgent-tasks-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.urgent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.urgent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;

  &:last-child {
    border-bottom: none;
  }
}

.task-info {
  flex: 1;
}

.task-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.task-details {
  color: #606266;
  font-size: 14px;
}

.task-time {
  color: #f56c6c;
  font-weight: 500;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-title {
  font-size: 16px;
  color: #606266;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 117, 188, 0.1);
  color: #1a75bc;
}

.nursing-icon {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-desc {
  color: #909399;
  font-size: 14px;
}

.task-list,
.patient-status-cards {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.view-all {
  color: #1a75bc;
  font-size: 14px;
  cursor: pointer;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;

  &:last-child {
    border-bottom: none;
  }
}

.task-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #1a75bc;
}

.task-status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-waiting {
  background: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.status-pending {
  background: rgba(26, 117, 188, 0.1);
  color: #1a75bc;
}

.status-completed {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.status-urgent {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.status-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.status-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.patient-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.patient-name {
  font-weight: 500;
  font-size: 16px;
}

.patient-condition {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.condition-stable {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.condition-attention {
  background: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.condition-critical {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.patient-info {
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.label {
  color: #606266;
}

.value {
  font-weight: 500;
}

.patient-actions {
  display: flex;
  gap: 10px;
}

.menu-toggle {
  display: none;
  margin-right: 15px;
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .status-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }

  .menu-toggle {
    display: block;
  }

  .task-item {
    flex-wrap: wrap;
    gap: 10px;
  }

  .task-status {
    margin-left: auto;
  }
}
</style>